<template>
     <div>
        <ul class="rightAside" v-show="isShow">
            <li>
                <img src="@/icons/callMe.png"/>
            </li>
            <li @click="retrunTop()">
                <img src="@/icons/returnTop.png"/>
            </li>
        </ul>
        <div id="footer">
            <div class="wrapper">
                <div class="footercontent">
                    <div>
                        <img src="@/index/return.png"/>
                        <span>30天无忧退货</span>
                    </div>
                    <div>
                        <img src="@/index/car.png"/>
                        <span>免费送货上门</span>
                    </div>
                    <div>
                        <img src="@/index/cup.png"/>
                        <span>匠心品质保证</span>
                    </div>
                </div>
                <div class="footercontent">
                    <ul>
                        <li>关于我们</li>
                        <li>商务合作</li>
                        <li>配送验收</li>
                        <li>联系我们</li>
                        <li>售后服务</li>
                    </ul>
                </div>
                <div class="footercontent">
                    <p class="police">Copyright C 2018 - 2019 宅寂家具版权所有  浙ICP 备 050449872 号 浙公网安备 11010102001707 号</p>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return {
            isShow: false
        }
    },
    methods: {
        handleScroll () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop > 520) {
                this.isShow = true
            } else {
                this.isShow = false
            }
        },
        retrunTop(){
            var timer=setInterval(function(){
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                var ispeed    = Math.floor(-scrollTop/6);
                if(scrollTop==0){
                    clearInterval(timer);
                }
                document.documentElement.scrollTop = document.body.scrollTop = scrollTop+ispeed;
            },30)
        }
    },
    mounted () {
        window.addEventListener('scroll', this.handleScroll)
    },
    computed: {
        scrollState(){
            console.log(document.body.scrollHeight)
            return  document.body.scrollHeight;
        }
    },
    watch: {
        scrollState:{
            handler(ov,nv){

            },
            immediate: true
        }
    },
}
</script>
<style lang="scss" scoped>
    @mixin clearfix() {
        &::after {
            display: block;
            clear  : both;
            content: '';
        }
    }
    #footer{
        position        : relative;
        bottom          : 0;
        text-align      : center;
        width           : 100%;
        background-color: #ebebeb;
       .wrapper{
            width   : 12rem;
            margin  : 0 auto;
            position: relative;
            @include clearfix();
        }
        .footercontent{
            width   : 12rem;
            margin  : 0 auto;
            position: relative;
            @include clearfix();
            display        : flex;
            font-size      : 0.3rem;
            color          : #B49D7E;
            justify-content: space-between;
            div{
                display    : flex;
                align-items: center;
                padding    : 0.26rem 0;
                box-sizing : border-box;
                span{
                    margin-left: 0.24rem
                }
            }
            ul{
                margin              : 0 auto;
                padding-inline-start: 0;
                li{
                    list-style: none;
                    font-size : 0.2rem;
                    color     : #434343;
                    text-align: center;
                    padding   : 0 0.17rem;
                    float     : left;
                }
            }
            img{
                width  : 0.95rem;
                height : 0.95rem;
                display: block
            }
            .police{
                font-size    : 0.15rem;
                color        : #434343;
                text-align   : center;
                width        : 100%;
                margin-top   : 0.15rem;
                margin-bottom: 0;
            }
        }
    }
    .rightAside{
            position            : fixed;
            bottom              : 2.3rem;
            right               : 0;
            padding-inline-start: 0;
            margin-bottom       : 0;
            li{
                list-style: none;
                width     : 1.2rem;
                height    : 0.8rem;
                margin-top: 0.13rem;
                cursor    : pointer;
                img{
                    width  : 100%;
                    height : 100%;
                    display: block;
                }
            }
        }

</style>
